import React from 'react'
import {Tabs,Select,Table, Divider, Tagm,message,Modal,Input} from 'antd';
import './index.less';
import axios from 'axios';
import {PATH,IP} from '../../../utils/urls';
import SearchBar from '../../../components/searchbar'
import {createHashHistory} from 'history';
const { TabPane } = Tabs;
const { Option } = Select;
import {languageKindList, musicKindList, publishCountry} from "../../../utils/config";
import moment from "../../rz/warnlogmanager";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";

export default class Rolemanager extends React.Component {
    columnsArray = [
	{
        title: '序号',
        dataIndex: 'key',
        key: 'key',
		
    },
         {
        title: '角色名称',
        dataIndex: 'roleName',
        key: 'roleName',
    },
    {
        title: '角色key',
        dataIndex: 'roleKey',
        key: 'roleKey',
    },
	{
        title: '角色状态',
        dataIndex: 'status',
        key: 'status',
    },
    {
        title: '排序',
        key: 'roleSort',
        dataIndex: 'roleSort',
    },
	 {
        title: '添加时间',
        key: 'createTime',
        dataIndex: 'createTime',
    },{
            title:"操作",
            key:"tags",
            dataIndex: 'tags',
            render: (tags,data) => (
                <span>
            {tags.map((tag,index) => {
                if(index !=3){
                    return (
                        <span key={index}><a href="javascript:void(0);" onClick={this.actionClick.bind(this,index,data)}>{tag}</a>
                        <Divider type="vertical" /></span>
                    );
                }else{
                    return (
                        <span key={index}><a href="javascript:void(0);" onClick={this.actionClick.bind(this,index,data)}>{tag}</a></span>
                    );
                }
            })}
          </span>
            ),
        }
    ];
    constructor(props) {
        super(props);
        this.state = {
            resourceStatusArray:[],
            //分页参数
            queryInfo:{
                current:1,
                total2:10,
                pageSize:10
            },
            //编辑
            editData:{
                roleName:"",
                roleKey:"",
                status:""
            },
            showEditModal: false,//控制编辑弹出窗显示
            addOrEdit:-1,//0为添加角色，1为修改角色
            modalTitle:"",//编辑角色的标题内容
            showEmpower:false,//授权界面显示
            editEmpowerId:-1,//修改授权选中的角色id
        };

        //获取角色数据列表
        this.changePage(1,null,null,null,null);
    }

    /**
     * 点击操作功能
     * @returns {*}
     */
    actionClick = (index,props) => {
        console.log(props);
        switch (index) {
            //修改信息
            case 0:
                this.state.editData.roleName = props.roleName;
                this.state.editData.roleKey = props.roleKey;
                this.state.editData.status = props.status;
                this.setState({
                    editData:this.state.editData,
                    showEditModal: true,
                    addOrEdit:1,
                    modalTitle:"编辑角色"
                });
                break;
            //删除
            case 1:
                Modal.confirm({
                    title: "提示",
                    content: '是否确认删除？',
                    onOk:this.delectAreaSceneFun.bind(this,props),
                    okText: '确认',
                    cancelText: '取消',
                });
                break;
                //授权
            case 2:
                //获取权限
                this.getRoleMenuRoleData(props.roleId);
                this.setState({
                    showEmpower:true,
                    editEmpowerId:props.roleId
                })
                break;
            default:
                break;
        }

    }

    /**
     * 删除
     * @returns {*}
     */
    delectAreaSceneFun(props){
        axios.post(PATH.delectRole+"?ids="+props.roleId,{
        },{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then(response=>{
                if(response.data.code == 0){
                    message.success(response.data.msg);
                }else{
                    message.error(response.data.msg);
                }
            })
    }

    /**
     * 点击搜索
     * @param searchFields
     */
    onSearch = (searchFields) => {
        let props0 = searchFields.roleName;
        let props1 = searchFields.roleKey;
        let start = null;
        let end = null;
        if(props0 == -1){
            props0 = null;
        }
        if(props1 == ""){
            props1 = null;
        }
        if(searchFields.start){
            start = moment(searchFields.start).format('YYYY-MM-DD');
        }
        if(searchFields.end){
            end = moment(searchFields.end).format('YYYY-MM-DD');
        }
        this.changePage(1,props0,props1,start,end);
    }

    /**
     * 搜索内容
     * @returns {*[]}
     */
    searchFields = () => {
        return [{
            title: '角色名',
            key: 'roleName',
            type: 'input',
            labelWidth:80
        }, {
            title: '角色key',
            key: 'roleKey',
            type: 'input',
            labelWidth:80
        }, {
            title: '开始日期',
            key: "start",
            type: 'date',
            defaultValue: "",
            labelWidth:80
        }, {
            title: '结束日期',
            key: "end",
            type: 'date',
            defaultValue: "",
            labelWidth:80
        }]
    }

    /**
     * 切换页数
     * @param page
     */
    changePage = (page,props0,props1,createTimeBegin,createTimeEnd) => {
        let param = {
            current:page,
            size: 10,
            roleName:props0,
            roleKey:props1,
            createTimeBegin:createTimeBegin,
            createTimeEnd:createTimeEnd
        }
        axios.post(PATH.roleList,param).then(response=>{
            console.log(response);
            for(let i = 0;i<response.data.data.records.length;i++){
                response.data.data.records[i] = {...response.data.data.records[i],
                    key:(i+1),
                tags:["编辑","删除","授权"]};
            }
            this.setState({
                resourceStatusArray:response.data.data.records,
                queryInfo:{
                    total2: response.data.data.total,
                    pageSize:response.data.data.size,
                    current:response.data.data.current
                }
            })
        })
    }

    /**
     * 弹出角色编辑或添加窗点击确定
     * @param e
     */
    handleOk = e => {
        let path = "";
        if(this.state.addOrEdit == 0){
            path = PATH.addRole;
        }else{
            path = PATH.editRole;
        }

        axios.post(path,this.state.editData)
            .then(response=>{
                if(response.data.code == 0){
                    message.success(response.data.msg);
                }else{
                    message.error(response.data.msg);
                }

            })
        this.setState({
            showEditModal: false,
        });
    };

    /**
     * 角色编辑或添加窗点击取消
     * @param e
     */
    handleCancel = e => {
        console.log(e);
        this.setState({
            showEditModal: false,
        });
    };

    /**
     * 弹出授权窗点击确定
     * @param e
     */
    handleEmpowerOk = e => {
        let path = "";
        console.log(this.state);
        axios.post(PATH.roleRightSave,{
            role:this.state.editEmpowerId
        })
            .then(response=>{
                if(response.data.code == 0){
                    message.success(response.data.msg);
                }else{
                    message.error(response.data.msg);
                }

            })
        this.setState({
            showEmpower: false,
        });
    };

    /**
     * 授权窗点击取消
     * @param e
     */
    handleEmpowerCancel = e => {
        console.log(e);
        this.setState({
            showEmpower: false,
        });
    };

    /**
     * 输入框值变化
     * @returns {*}
     */
    inputChange = (event)=>{
        if(event && event.target && event.target.value){
            let value = event.target.value;
            switch (event.target.id) {
                case "editEquipMentInput0":
                    this.state.editData.roleName= value;
                    break;
                case "editEquipMentInput1":
                    this.state.editData.roleKey= value;
                    break;
                case "editEquipMentInput2":
                    this.state.editData.status= value;
                    break;
            }
            this.setState({editData:this.state.editData});
        }
    }

    /**
     * 添加
     */
    addFun=()=>{
        this.setState({
            showEditModal: true,
            addOrEdit:0,
            modalTitle:"添加角色",
            editData:{
                roleName:"",
                roleKey:"",
                status:""
            }
        });
    }

    /**
     * 获取角色权限树
     */
    getRoleMenuRoleData=(roleId)=>{
        axios.get(PATH.roleMenuTreeData+"/"+roleId,{
            roleId:roleId
        },{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
            .then(response=>{
                console.log(response);
                if(response.data.code == 0){

                }else{

                }
            })
    }

    render() {
        return (
            <div>
                <BreadcrumbCustom first="系统设置" second="角色管理" />
				  <SearchBar
                    onSubmit={this.onSearch}
                    onAdd={this.addFun}
                    fields={this.searchFields()}
                    addBtn = 'false'
                />
                <Table  className= "reasureManagerClass" bordered dataSource={this.state.resourceStatusArray}
                        columns={this.columnsArray}
                        rowKey={record => record.key}
                        pagination={{  // 分页
                            pageSize: this.state.queryInfo.pageSize,  //显示几条一页
                            current: this.state.queryInfo.current,//当前显示页
                            total: this.state.queryInfo.total2,//数据总数量
                            onChange: this.changePage,//切换页数
                        }}
                />
                <Modal
                    title={this.state.modalTitle}
                    visible={this.state.showEditModal}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                >
                    <div>
                        <div className="resourceContentCell">
                            <div className="changeTitle">角色名称:</div>
                            <Input onChange={event=>this.inputChange(event)}  id="editEquipMentInput0" className="changeCell" value={this.state.editData.roleName} placeholder="请输入角色名称"/>
                        </div>
                        <div className="resourceContentCell">
                            <div className="changeTitle">角色key:</div>
                            <Input onChange={event=>this.inputChange(event)}  id="editEquipMentInput1" className="changeCell" value={this.state.editData.roleKey} placeholder="请输入角色key"/>
                        </div>
                        <div className="resourceContentCell">
                            <div className="changeTitle">角色状态:</div>
                            <Input onChange={event=>this.inputChange(event)}  id="editEquipMentInput2" className="changeCell" value={this.state.editData.status} placeholder="请输入角色状态"/>
                        </div>
                        <div className="clearBoth"></div>
                    </div>
                </Modal>

                <Modal
                    title="授权"
                    visible={this.state.showEmpower}
                    onOk={this.handleEmpowerOk}
                    onCancel={this.handleEmpowerCancel}
                    okText="确认"
                    cancelText="取消"
                >

                </Modal>
            </div>
        )
    }
}